<template>
  <div class="chapter" v-if="data.chapterdata">
    <div class="card_cover top">
      <p v-if="data">
        <a href="/home">主页 ></a>
        <a :href="`/home/book/${data.chapterdata.book_id}`"
          >{{ data.chapterdata.book_title }} ></a
        >
        <a href="">{{ data.chapterdata.chapter_title }} </a>
      </p>
      <p>
        <a href="/home/login" @click.prevent="toCollection"> 加入书架 </a>
        <a href="#"> 推荐本书 </a>
      </p>
    </div>
    <div class="con">
      <div class="con_footer">
        <p @click="handleChapter(0)">上一章</p>
        <p @click="handleGo">返回目录</p>
        <p @click="handleChapter(1)">下一章</p>
      </div>
      <h2>
        {{ data.chapterdata.chapter_title }}
      </h2>
      <p class="chapter_content" v-html="data.chapterdata.chapter_content"></p>
      <div class="con_footer">
        <p @click="handleChapter(0)">上一章</p>
        <p @click="handleGo">返回目录</p>
        <p @click="handleChapter(1)">下一章</p>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, onBeforeUnmount, ref } from "vue";
import {
  getChapter,
  addBook,
  putCollection,
  getNextChapter,
} from "../../api/data";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
export default {
  setup() {
    const store = useStore();
    const route = useRoute();
    const router = useRouter();
    const share=reactive({
      title:"当前小说",
      summary:"jsjaj",
      desc:"ahjdbahb"

    })
    const isactive = ref(true);
    const data = reactive({
      chapterdata: null,
    });

    let _id = route.params.id;
    onMounted(async () => {
      let data1 = await getChapter({
        _id,
      });

      if (data1.code == 200) {
        data.chapterdata = data1.data;
      } else {
        alert(data.msg);
      }
    });


    // 返回目录页面
    const handleGo = () => {
      router.push(`/home/book/${data.chapterdata.book_id}`);
    };

    // 获取上一章和下一章的信息
    const handleChapter = async (isNext) => {
      if (isNext == 1) {
        //下一章
        let data1 = await getNextChapter({
          book_id: data.chapterdata.book_id,
          chapter_id: data.chapterdata._id,
          isNext: true,
        });
        // console.log(data1)
        if (data1.code == 200) {
          data.chapterdata = data1.data;
          $("html").animate(
            {
              scrollTop: 0,
            },
            0
          );
        } else {
          alert(data1.msg);
        }
      } else {
        //上一章

        let data1 = await getNextChapter({
          book_id: data.chapterdata.book_id,
          chapter_id: data.chapterdata._id,
          isNext: false,
        });
        if (data1.code == 200) {
          data.chapterdata = data1.data;
          $("body,html").animate(
            {
              scrollTop: 0,
            },
            0
          );
        } else {
          alert(data1.msg);
        }
      }
    };

    // 提交历史记录
    onBeforeUnmount(async () => {
      let book_id = data.chapterdata.book_id;
      let user_id = store.state.userdata._id;
      let chapter_id = data.chapterdata._id;
      let create_data = Date.now();
      // console.log(user_id, book_id, chapter_id, create_data);
      await putCollection({
        user_id,
        book_id,
        chapter_id,
        create_data,
        
      });
    });

    // 收藏书籍
    const toCollection = async () => {
      let book_id = data.chapterdata.book_id;
      let user_id = store.state.userdata._id;
      let chapter_id = data.chapterdata._id;

      let data1 = await addBook({
        user_id,
        book_id,
        chapter_id,
      });

      // alert(data1.msg);
    };

    return {
      data,
      toCollection,
      handleChapter,
      isactive,
      handleGo,
    };
  },
};
</script>

<style lang="scss" scoped>
.con_footer {
  height: 70px;
  line-height: 70px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  p {
    cursor: pointer;
    padding: 0 20px;
    height: 36px;
    border: 1px solid #ccc;
    border-radius: 3px;
    line-height: 34px;
    color: #369;
    margin-left: 30px;
    &:hover {
      color: crimson;
    }
    &:nth-of-type(1) {
      margin-left: 0px;
    }
  }
}
.chapter {
  border: 2px solid #88c6e5;
  .top {
    height: 45px;
    background-color: #e1eced;
  }

  .con {
    h2 {
      height: 40px;
      line-height: 40px;
      font-size: 24px;
      font-weight: 550;
      color: rgb(158, 23, 23);
      text-align: center;
      padding: 0 20px;
    }

    .chapter_content {
      border-top: 1px dashed #88c6e5;
      padding: 0 20px;
      padding-top: 20px;
      line-height: 30px;
    }
  }
}

.card_cover {
  display: flex;
  justify-content: space-between;
  height: 41px;
  align-items: center;
  background-color: #e1eced;
  border-bottom: 1px solid #88c6e5;
  padding: 15px;
  p {
    height: 41px;
    display: flex;
    align-items: center;
    a {
      font-size: 14px;
      color: #333;
      &:hover {
        color: crimson;
      }
    }

    &:nth-of-type(2) {
      a {
        display: flex;
        background-color: #459df5;
        padding: 5px 5px;
        color: #fff;
        margin-right: 10px;
        font-size: 12px;
      }
    }
  }
}

.active {
  pointer-events: none;
  cursor: default;
  color: #ccc !important;
  border: 1px solid #ccc !important;
}
</style>